/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 个人信息
 */
import React, {Component} from "react";
import {
    StyleSheet,
    TouchableOpacity,
    Dimensions,
    Image,
    View,
    ToastAndroid,
    Button,
    Text,
    TextInput,
    FlatList,
    ScrollView,
    SafeAreaView,
} from "react-native";
import PhotoView from "../../../widget/homework/PhotoView";
import AnimateNumber from 'react-native-animate-number'
import Sound from 'react-native-sound';
const width = Dimensions.get('window').width
var height = Dimensions.get('window').height
import {fetchGetRequest} from "../../../api/NetworkTool";
import method from "../../../api/method";
import api from "../../../api/api";
import Tips from 'react-native-root-tips'
Sound.setCategory('Playback');

type Props = {
    navigation: any,
}

type State = {
    score: string,
    feedback: string,
    correct_teacher: string,
    course: string,
    lesson: string,
}

export default class AlteredDetailScene extends Component<Props,State> {

    constructor(props) {
        super(props);
        this.state = {
            lessionId: this.props.navigation.state.params.lession_id,
            score: '',
            feedback: '',
            correct_teacher: '',
            course: '',
            lesson: '',
            stars: [],
            imageList: [],
            voice: '',
            sound_time: 0,
            homework: {
                course_id: 0,
                course_title: '',
                create_at: '',
                feedback: '',
                lesson_id: 0,
                lesson_title: '',
                teacher: [
                    {
                        id: 0,
                        image: '',
                        realname: ''
                    }
                ],
                teacher_file: [],
                voice: '',
            }
        };

    }

    static navigationOptions = ({navigation}: any) => ({
        headerTintColor: 'black',
        title: '批改详情',
        headerStyle: {
            // backgroundColor:color.primary,
        },

        headerRight: (
            <Text/>
        ),
        headerLeft: <TouchableOpacity onPress={()=>{
            navigation.goBack()
        }}>
            <Image style={{marginLeft:12}} source={require('../../../../res/img/gobal_back.png')}/>
        </TouchableOpacity>
    });


    componentDidMount() {
        fetchGetRequest(api.homeworkDetail, method.get, {lesson_id: this.state.lessionId})
            .then(res => {
                console.log(res)

                let homework = res.homework

                this.setState({
                    homework: homework
                })
            })
            .catch(err => {

            })
    }


    /**
     * 播放音频
     */
    playSound() {
        Tips.showInfo('加载语音可能需要一些时间，请稍作等待~', {mask: true})
        let homework = this.state.homework
        this.sound = new Sound(homework.voice, Sound.MAIN_BUNDLE, (e) => {
            // this.setState({
            //     sound_time: this.sound.getDuration()
            // })
            // alert(this.sound.getDuration())

            this.sound.play();
        });
    }

    /**
     * 停止音频
     */
    stopSound() {
        if (this.sound != null) {
            this.sound.stop().release();
        }

    }

    /**
     * 关闭界面同时关闭音频
     */
    componentWillUnmount() {
        this.stopSound()
    }

    render() {

        let homework = this.state.homework

        return (
            <ScrollView style={{flex:1,}}>
                <View>
                    <FlatList
                        data={homework.teacher_file}
                        keyExtractor={(item, index) => index}
                        renderItem={this.renderTagItem}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    />
                    <View style={{height:0.5,width:width ,backgroundColor:'#DFDFDF',marginBottom:15,marginTop:15}}/>
                    <View style={{marginBottom:15}}>
                        <View style={{flexDirection:'row', alignItems:'center'}}>
                            <Text style={styles.title_left}>课程名称：</Text><Text
                            style={styles.content}>{homework.course_title}</Text>
                        </View>
                        <View style={{flexDirection:'row', alignItems:'center',marginTop:10}}>
                            <Text style={styles.title_left}>所在课节：</Text><Text
                            style={styles.content}>{homework.lesson_title}</Text>
                        </View>
                        <View style={{flexDirection:'row', alignItems:'center',marginTop:10}}>
                            <Text style={styles.title_left}>批改老师：</Text><Text
                            style={styles.content}>{homework.teacher[0].realname}</Text>
                        </View>
                    </View>
                    <View style={{height:0.5,width:width ,backgroundColor:'#DFDFDF',}}/>

                    <View style={{flexDirection:'row', alignItems:'center',marginTop:10,marginBottom:10}}>
                        <Text style={styles.title_left}>老师批语：</Text>
                        <Text style={styles.content}>{homework.feedback}</Text>
                    </View>

                    {this.checkVoice(homework)}

                </View>

                <PhotoView ref={(photoView)=>{
                    this.photoView = photoView;
                }}/>
            </ScrollView>

        )
    }

    checkVoice(homework) {

        if (homework.voice != null) {
            return <View style={{flexDirection:'row', alignItems:'center',}}>
                <Text style={styles.title_left}>语音播报：</Text>
                <TouchableOpacity onPress={()=>this.playSound()}>
                    <View style={{flexDirection:'row', alignItems:'center', marginLeft: 15,}}>
                        <Image style={{width:15,height:15}}
                               source={require('../../../../res/img/homework/xiaolaba.png')}/><Text
                        style={{  color: 'black',fontSize: 13,marginLeft:5}}>播放</Text>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity onPress={()=>this.stopSound()}>
                    <View style={{flexDirection:'row', alignItems:'center',marginLeft:10}}>
                        <Image style={{width:15,height:15}}
                               source={require('../../../../res/img/homework/xiaotingzhi.png')}/><Text
                        style={{  color: 'black',fontSize: 13,marginLeft:5}}>停止</Text>
                    </View>

                </TouchableOpacity>
            </View>

        } else {
            return <View>
            </View>
        }

    }

    // playSound() {
    //     const s = new Sound('http://samples.mplayerhq.hu/A-codecs/AAC/2_aac_error_while_decoding_stream.aac',null, (e) => {
    //         if (e) {
    //             console.log('播放失败');
    //             return;
    //         }
    //         console.log('播放成功');
    //         s.play(() => s.release());
    //     });
    // }

    renderTagItem = ({item}) => {
        return (
            <TouchableOpacity onPress={()=>{this.pressAction(item)}}>
                <Image
                    source={{uri:item}}
                    style={styles.icon}/>
            </TouchableOpacity>
        )
    }

    pressAction(source) {
        this.photoView.pressAction(source);
    }

}

const styles = StyleSheet.create({
    icon: {
        width: 131 * height / 667.0,
        height: 185 * height / 667.0,
        marginLeft: 12,
        marginTop: 15,
    },
    star: {
        width: 13,
        height: 13,
        marginLeft: 12,
    },
    title_left: {
        marginLeft: 12,
        color: 'rgba(0, 0, 0, 0.5)',
        fontSize: 12,
        alignSelf: "flex-start"
    },
    content: {
        color: 'black',
        fontSize: 13,
        marginLeft: 15,
        width: 275,
        paddingRight: 20
    },
    score: {
        width: 100,
        height: 100,
        marginLeft: 240,
        position: 'relative',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#EAEAEA',
        borderRadius: 200,
    }
});


